<template>
  <div>
    <PageTitle title="订单详情"></PageTitle>
    <!-- <el-steps :active="orderStep" align-center>
      <el-step title="买家下单" :description="detail[0].create_at"></el-step>
      <el-step title="买家付款" :description="detail[0].pay_date"></el-step>
      <el-step title="商家发货" :description="detail[0].number"></el-step>
      <el-step title="订单完成" :description="detail[0].updata_at"></el-step>
    </el-steps> -->
    <div class="content">
      <div class="box">
        <div>
          <h3>订单编号</h3>
          <h4>{{ detail.order_code }}</h4>
        </div>
        <div>
          <h3>下单时间</h3>
          <h4>{{ detail.create_at }}</h4>
        </div>
        <div>
          <h3>支付方式</h3>
          <h4>{{ detail.pay_status == '3' ? '余额支付' : '微信支付' }}</h4>
        </div>
        <div>
          <h3>配送方式</h3>
          <h4>快递</h4>
        </div>
        <div>
          <h3>公司名称</h3>
          <h4>{{ detail.company }}</h4>
        </div>
        <div>
          <h3>品牌名称</h3>
          <h4>{{ detail.fication_name }}</h4>
        </div>
        <div>
          <h3>商品名称</h3>
          <h4>{{ detail.goods_name }}</h4>
        </div>
        <div>
          <h3>商品价格</h3>
          <h4>{{ detail.subtotal }}</h4>
        </div>
        <div>
          <h3>用户昵称</h3>
          <h4>{{ detail.nickname }}</h4>
        </div>
        <!-- <div>
          <h3>买家留言</h3>
          <h4>{{ detail[0].remark }}</h4>
        </div> -->
        <!-- <div class="editAddress">
          <el-button type="primary" size="small" @click="dialogAddress = true">修改订单收货信息</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import _ from 'lodash'
  export default {
    name: 'OrderDetail',
    components: {
      PageTitle,
    },
    activated() {
      this.$goTop()
      this._get()
    },
    deactivated() {
      this.$destroy()
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        dialogAddress: false,
        dialogExpress: false,
        dialogProg: false,
        formAddress: {
          user: '',
          mobile: '',
          address: ''
        },
        rulesAddress: {
          user: [
            { required: true, message: '请输入收件人', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                const boolean = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/).test(value)
                if(!boolean) {
                  return callback(new Error('请正确填写手机号'))
                }
                return callback()
              },
              trigger: 'blur'
            }
          ],
          address: [
            { required: true, message: '请输入收货地址', trigger: 'blur' }
          ]
        },
        detail: [],
        tableData: [],
        logis: ''
      }
    },
    computed: {
      orderStatus() {
        let status = ''
        let title = ''
        let desc = ''
        let time = ''
        // this.detail.forEach(item => {
          if(this.detail[0].pay == 1) {
            status = 1
            title = '未付款'
            desc = '后不付款订单自动取消'
            time = this.detail[0].payment_endtime
          }
          if(this.detail[0].pay == 2) {
            if(this.detail[0].ship == 2) {
              status = 2
              title = '待发货'
              desc = '后商家不发货,会重新安排新的商家发货,请耐心等待'
              time = this.detail[0].not_endtime
            }
            if(this.detail[0].ship == 4) {
              status = 4
              title = '订单已完成'
              desc = ''
              time = ''
            }
            if(this.detail[0].ship == 5) {
              status = 5
              title = '退货申请中'
              desc = ''
              time = ''
            }
            if(this.detail[0].ship == 6) {
              status = 2
              title = '待收货'
              desc = '后自动确认收货'
              time = this.detail[0].confirm_endtime
            }
          }
        // })
        return { status, title, desc, time }
      },
      orderStep() {
        let step = [
          this.detail[0].create_at,
          this.detail[0].pay_date,
          this.detail[0].number,
          this.detail[0].updata_at
        ]
        let count = 0
        step.forEach(item => {
          if(item) {
            count ++
          }
        })
        return count
      }
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/order/details',
          method: 'GET',
          params: {
            id: this.$route.params.id
          }
        })
        if (code === 0) {
          data.items.nickname = data.nikname
          this.detail = data.items
        }
      },
      async getLogistics(com, num) {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/fication/up',
          method: 'GET',
          params: {
            com,
            // num: '3950055201640'
            num
          }
        })
        if(code === 0) {
          if (Array.isArray(data)) {
            let logisArr = data[0].data.map(item => {
              item.day = item.time.substring(5, 10)
              item.time = item.time.substring(11, 16)
              return item
            })
            this.logis = {
              com: data[0].com,
              num: data[0].nu,
              logisArr
            }
          } else {
            this.logis = data
          }
        }
      },
      addressSubmit: _.throttle(function() {
        this.$refs.ruleForm.validate(async (valid) => {
          if(!valid) {
            return false
          }
          
          let {data: {code, msg}} = await this.$axios({
            url: '',
            method: 'post',
            data: {
              class_name: this.ruleForm.class_name
            }
          })
          
          if(code == 0) {
             this.$message({
               type: 'success',
               message: '操作成功'
             })
             setTimeout(() => {
               this.$router.go(-1)
             }, 2000)
          } else {
            this.$message({
              type: 'warning',
              message: msg
            })
          }
        })
      },2000,{
        trailing: false
      }),
      dialogExpressClose() {
        this._get()
        this.dialogExpress = false
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .content {
    display: flex;
    margin-top: 20px;
    border: 1px solid #eee;
    .box {
      flex: 1;
      padding: 10px;
      height: 400px;
      border-right: 1px solid #eee;
      &:last-child {
        border-right: none;
      }
      div {
        display: flex;
        align-items: center;
        h3 {
          flex: 0 0 70px;
          margin: 4px;
          width: 100px;
          font-size: 14px;
          font-weight: 400;
          color: $colorInfo;
        }
        h4 {
          flex: 1;
          margin: 4px;
          font-size: 14px;
          font-weight: 400;
          &.color-danger {
            font-size: 18px;
          }
        }
      }
      .editAddress {
        margin-top: 10px;
      }
    }
  }
  .list-img {
     width:80%;
     height:60px;
     cursor: pointer;
  }
</style>
